$nt-datepicker-background-selected: get-color(primary) !default;
$nt-datepicker-background-active: $light-gray !default;
$nt-datepicker-block-width: 2.5em !default;
$nt-datepicker-block-padding: rem-calc(4 5) !default;

$nt-datepicker-color: $black !default;
$nt-datepicker-color-selected: $white !default;
$nt-datepicker-color-hover: get-color(primary) !default;
$nt-datepicker-color-disabled: $medium-gray !default;

$nt-datepicker-font-size: rem-calc(12) !default;

$nt-datepicker-pane-radius: $global-radius !default;
$nt-datepicker-pane-padding: rem-calc(4) !default;
$nt-datepicker-pane-background: $white !default;

$nt-datepicker-symbol-padding: $form-spacing / 2 !default;
$nt-datepicker-symbol-color: $dark-gray !default;
$nt-datepicker-symbol-font-family: '' !default;
$nt-datepicker-symbol-caret: '\25BC' !default;
$nt-datepicker-symbol-clear: '\00D7' !default;

@mixin nt-datepicker-table {
  table {
    font-size: $nt-datepicker-font-size;
    margin: 0;
    user-select: none;
    border-collapse: separate;
  }
  tbody,
  tfoot,
  thead {
    border: 0px;
    background: transparent !important;
  }
  tfoot button {
    margin-bottom: 0px;
  }
  td,
  th {
    text-align: center;
    width: $nt-datepicker-block-width;
    height: 2em;
    box-sizing: border-box;
    white-space: nowrap;
    transition: color .3s;
    padding: rem-calc(4 0);
    span {
      cursor: pointer;
      box-sizing: border-box;
      padding: $nt-datepicker-block-padding;
      border-radius: $nt-datepicker-pane-radius;
      transition: background-color .15s;
      &:hover {
        color: $nt-datepicker-color-hover;
      }
    }
    &[colspan="3"] {
      width: $nt-datepicker-block-width * 3;
      span {
        padding: 0;
      }
    }
    &.active span {
      background-color: $nt-datepicker-background-active;
    }
    &.selected span {
      color: $nt-datepicker-color-selected;
      background-color: $nt-datepicker-background-selected;
      cursor: auto;
    }
    &.disabled span {
      color: $nt-datepicker-color-disabled;
      cursor: no-drop;
    }
  } // tbody td span {
  //   display: block;
  // }
  tr {
    padding: 4px 0px;
    &:nth-child(even),
    &:nth-child(odd) {
      background: transparent !important;
    }
  }
}

@mixin nt-datepicker {
  .nt-datepicker {
    position: relative;
    display: block;

    &:focus {
      outline: none;
    }
  }

  .nt-datepicker-pane {
    position: relative;
    border-radius: $nt-datepicker-pane-radius;
    background-color: $nt-datepicker-pane-background;
    padding: $nt-datepicker-pane-padding;
    @include nt-datepicker-table;

    .nt-datepicker-month {
      td,
      th {
        width: 14.28571428%;
      }
    }
    .nt-datepicker-year {
      td,
      th {
        width: 33.333333333%;
        height: 3.9em;
      }
    }
    .nt-datepicker-multi-year {
      td,
      th {
        width: 25%;
        height: 3.9em;
      }
    }
  }

  $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);

  .nt-datepicker-clear,
  .nt-datepicker-caret {
    position: absolute;
    right: $nt-datepicker-symbol-padding;
    top: ($height - $input-font-size) / 2;
    font-size: 1em;
    line-height: 1em;
    &::after {
      font-family: $nt-datepicker-symbol-font-family;
      display: block;
      color: $nt-datepicker-symbol-color;
      left: auto;
    }
  }
  .nt-datepicker-caret {
    pointer-events: none;
    &::after {
      content: $nt-datepicker-symbol-caret;
    }
  }
  .nt-datepicker-clear {
    cursor: pointer;
    &::after {
      content: $nt-datepicker-symbol-clear;
    }
  }
}
